<template>
    <div class="header_body">
        <img class="book_icon" src="../assets/bookImge.png">
        <font class="header_title">淘书</font>
        <div class="page_name">
            <font style="cursor: pointer;" @click="goBookList()">书店</font>&nbsp;&nbsp;/&nbsp;
            <font style="cursor: pointer;" @click="gotoShoppingCart()" >购物车</font>&nbsp;&nbsp;/&nbsp;
            <font style="cursor: pointer;" @click="gotoOrder()">订单</font>
        </div>
        <div v-if="!userName" @click="gotoLogin()" class="user_imge">
            <img src='../assets/userImge.jpg' class="user_icon"/>
            <font class="user_log">请登录</font>
        </div>
        <div v-else class="user_imge">
            <Poptip placement="left-start">
                <img src='../assets/userImge.jpg' class="user_icon_after_login"/>
                <div class="user_select down_line" slot="content" @click="gotoOrder()">我的订单</div>
                <div class="user_select down_line" slot="content" @click="gotoShoppingCart()">我的购物车</div>
                <div class="user_select down_line" slot="content" @click="goMyCenter()">个人中心</div>
                <div class="user_select" style="color: red" slot="content" @click="logout()">注销登录</div>
            </Poptip>
            <font class="user_name">Hi&nbsp;,&nbsp;{{userName}}</font>
        </div>
    </div>
</template>
<script>
import { userService } from '../service/userService'
export default {
    data() {
        return {
            userName: '',
        }
    },
    mounted() {
        this.userName =  userService.getUserInfo().userName;
    },
    methods:{
        gotoLogin() {
            this.$router.push('/login');
        },
        logout() {
            userService.userLogOut();
            this.$router.push('/login');
        },
        goBookList() {
            this.$router.push('/bookList');
        },
        goMyCenter() {
            this.$router.push('/userInfo');
        },
        gotoOrder () {
            this.$router.push('/orderList');
        },
        gotoShoppingCart () {
            this.$router.push('/shoppingCart');
        }
    }
}
</script>

<style scoped>
.header_body{
    width: 100%;
    height: 90px;
    background-color: rgb(255, 150, 64);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 20;
}
.book_icon{
    height: 90px;
    width: 90px;
    margin-left: 12vw;
}
.header_title{
    margin-left: 2vw;
    font-size: 2.5vw;
    color: white;
    font-family: "Helvetica";
}
.header_son_title{
    color: white;
    margin-left: 1vw;
    font-size: 35px;
    margin-top: 20px;
}
.page_name{
    margin-left: 37.5vw;
    color: white;
    margin-top: 38px;
    font-size: 1.2vw;
}
.user_select{
    font-size: 15px
}
.down_line{
    border-bottom: 1px solid rgb(184, 179, 179);
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.user_imge{
    margin-left: 3vw;
    width: 240px;
    height: 70px;
    border-radius: 35px;
    background-color: white;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.user_icon{
    margin-left: 5px;
    width: 60px;
    border-radius: 30px;
}
.user_icon_after_login{
    margin-top: 5px;
    margin-left: 5px;
    width: 60px;
    border-radius: 30px;
}
.user_log{
    margin-left: 10px;
    font-size: 22px;
    color: rgb(197, 191, 191);
}
.user_name{
    margin-left: 10px;
    font-size: 20px;
    color: rgb(197, 191, 191);
}
.user_center{
    color: white;
    font-size: 13px;
}

</style>

